<!-- components/CommonHeader.vue -->
<template>
  <view class="common-header" :style="headerStyle">

    <!-- 返回按钮 -->
    <view
        v-if="showBack"
        class="back-button"
        @click="handleBack"
    >
      <uni-icons type="back" size="24" color="#333"></uni-icons>
    </view>

    <!-- 标题 - 居中显示 -->
    <view class="header-title">
      <text class="title-text">{{ title }}</text>
    </view>
  </view>

</template>

<script setup>
import {computed} from 'vue';
import useSafeArea from '@/composables/useSafeArea';
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';

const props = defineProps({
  title: {
    type: String,
    default: '岚迹' // 默认标题
  },
  showBack: {
    type: Boolean,
    default: false // 默认不显示返回按钮
  },
  backDelta: {
    type: Number,
    default: 1 // 默认返回层级
  }
})

const emit = defineEmits(['back'])
// 处理返回逻辑
const handleBack = () => {
  emit('back') // 先触发自定义事件

  // 如果外部没有阻止默认行为，则执行默认返回
  if (!props.backPreventDefault) {
    uni.navigateBack({
      delta: props.backDelta
    })
  }
}

const { statusBarHeight, navBarHeight } = useSafeArea()

// 使用计算属性确保响应式更新
const headerStyle = computed(() => {
  console.log('导航栏高度更新:', navBarHeight.value)
  return {
    paddingTop: `${statusBarHeight.value}px`,
    height: `${navBarHeight.value}px`,
  }
})
</script>

<style scoped>
.common-header {
  width: 100%;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-button {
  position: absolute;
  left: 12px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  z-index: 1;
}

.header-title {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-text {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-align: center;
}
</style>